<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form name="form">
      <p>
        姓名
        <input type="text" name="name" value="jack" />
      </p>
      <p>
        密码
        <input type="password" name="password" value="123123" />
      </p>
      <p>
        邮箱
        <input type="text" name="email" value="jack@qq.com" />
      </p>
      <p>
        年龄
        <input type="number" name="age" value="20" />
      </p>
      <p>
        <button type="button" name="saveBtn">保存</button>
      </p>
    </form>
    <script>
      const form = document.form;

      form.saveBtn.onclick = function () {
        //收集表单信息
        const data = {
          name: form.name.value,
          email: form.email.value,
          age: form.age.value,
          password: form.password.value,
        };
        // 将数据发送服务器
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:3000/users");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader(
          "token",
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiamFjayIsImVtYWlsIjoiamFja0BxcS5jb20iLCJleHAiOjE3MDA3MjIzMTQsImlhdCI6MTcwMDcxODcxNH0.eKvhbrkFvMvBwrnfnuCWYuakGaYVoSd8n-385QBKVgw"
        );
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send(JSON.stringify(data));
      };
    </script>
  </body>
</html>
